<template>
  <div>
    <TablePageContainer>
      <template #header>
        <el-form :model="table.params" :inline="true">
          <el-form-item label="部门名称">
            <el-input v-model="table.params.name" placeholder="请输入部门名称" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getData">查询</el-button>
            <el-button @click="handleReset">重置</el-button>
          </el-form-item>
        </el-form>
      </template>
      <template #operation>
        <el-button type="primary" @click="handleCloneSaveOrEditDialog(true)">新增</el-button>
        <el-button type="primary" :disabled="table.currentRow === undefined" @click="handleAddChildren()">新增下级</el-button>
        <el-button type="danger" :disabled="table.selectionRows.length <= 0" @click="handleDel">批量删除</el-button>
      </template>
      <template #table>
        <el-table
          ref="treeTable"
          v-loading="table.loading"
          class="w_100"
          :data="table.data"
          row-key="id"
          border
          stripe
          default-expand-all
          highlight-current-row
          @selection-change="handleTableSelectionChange"
          @current-change="handleTableCurrentChange"
        >
          <el-table-column type="selection" width="50" align="center" />
          <el-table-column prop="name" label="部门名称" header-align="center" align="left" />
          <el-table-column label="部门描述" width="280" align="center">
            <template slot-scope="scope">
              <el-tooltip placement="top">
                <div slot="content">{{ scope.row.description }}</div>
                <span>{{ `${nullToStr(scope.row.description).substring(0, 15)}${nullToStr(scope.row.description).length > 15 ? '...' : ''}` }}</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="sorted" label="排序" width="100" align="center" sortable />
          <el-table-column prop="createdTime" label="创建时间" width="160" align="center" sortable />
          <el-table-column prop="updatedTime" label="修改时间" width="160" align="center" sortable />
          <el-table-column label="操作" width="250" align="center">
            <template slot-scope="scope">
              <el-button type="text" icon="fa fa-pen-to-square" @click="handleEdit(scope.row)">修改</el-button>
              <el-button type="text" icon="fa fa-trash-can" @click="handleDel(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </TablePageContainer>

    <SaveOrEdit v-if="saveOrEditDialog.visible" :id="saveOrEditDialog.id" :visible.sync="saveOrEditDialog.visible" :type="saveOrEditDialog.type" @getData="getData" @handleClose="handleCloneSaveOrEditDialog" />
  </div>
</template>
<script>
import { del, getTree } from '@/api/dept'
import _ from 'lodash'
import { nullToStr } from '@/utils'

export default {
  name: 'Dept',
  components: {
    TablePageContainer: () => import('@/components/TablePageContainer'),
    SaveOrEdit: () => import('@/views/dept/components/SaveOrEdit.vue')
  },
  data() {
    return {
      table: {
        params: {
          name: ''
        },
        defaultParams: undefined,
        loading: false,
        data: [],
        selectionRows: [],
        currentRow: undefined
      },
      saveOrEditDialog: {
        visible: false,
        type: undefined,
        id: undefined
      }
    }
  },
  created() {
    this.table.defaultListQuery = _.cloneDeep(this.table.params)
    this.getData()
  },
  methods: {
    nullToStr,
    getData() {
      this.saveOrEditDialog.id = undefined
      this.table.currentRow = undefined

      this.table.loading = true
      getTree(this.table.params).then(res => {
        this.table.data = res.data
        this.table.loading = false

        this.$nextTick(() => {
          this.$refs.treeTable.setCurrentRow()
        })
      })
    },
    handleTableSelectionChange(val) {
      this.table.selectionRows = val
    },
    handleTableCurrentChange(val) {
      this.table.currentRow = val
    },
    handleAddChildren() {
      this.handleCloneSaveOrEditDialog(true)
      this.saveOrEditDialog.type = 'add'
      this.saveOrEditDialog.id = this.table.currentRow.id
    },
    handleEdit(row) {
      this.handleCloneSaveOrEditDialog(true)
      this.saveOrEditDialog.type = 'edit'
      this.saveOrEditDialog.id = row.id
    },
    handleDel(row) {
      this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const ids = []
        if (this.table.selectionRows.length > 0) {
          this.table.selectionRows.forEach(function(item) {
            ids.push(item.id)
          })
        }

        if (row.id) {
          ids.push(row.id)
        }

        del(ids).then(() => {
          this.$message.success('删除成功')
          this.getData()

          this.table.currentRow = undefined
        })
      })
    },
    handleCloneSaveOrEditDialog(v) {
      this.saveOrEditDialog.type = undefined
      this.saveOrEditDialog.id = undefined
      this.saveOrEditDialog.visible = v
    },
    handleReset() {
      this.table.params = _.cloneDeep(this.table.defaultParams)
      this.getData()
    }
  }
}
</script>

<style scoped lang="scss">
.dept_container {
  display: flex;

  .left_container {
    width: 300px;
    padding: 18px;
    background: #ffffff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
    border-radius: 4px;
    overflow: hidden;
    color: #303133;
    transition: .3s;
  }

  .right_container {
    width: calc(100% - 300px);
    margin-left: 10px;
  }
}

::v-deep .el-tree-node__content {
  height: 35px !important;
  border-radius: 4px;
}
</style>
